<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix flex">
        <b>{{ $t('components.device.realtimeStatus') }}</b>
        <span class="text">{{ $t('components.device.acquisitionTime') }}：{{ getDatatime() }}</span>
      </div>
      <div class="state-container">
        <dl v-for="(item,index) in rtuPortDisplays" :key="index">
          <dt :class="getClass(item)">{{ getState(item) }}<em>{{ item.unit }}</em></dt>
          <dd class="iconfont" :class="item.iconfont" />
          <dd class="name">{{ lang === 'zh' ? item.name : item.namekey }}</dd>
        </dl>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDeviceState } from '@/utils/device'
export default {
  props: {
    serialno: {
      type: String,
      default() {
        return ''
      }
    },
    device: {
      type: Object,
      default() {
        return {}
      }
    },
    rtuPortDisplays: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      states: null,
      datatime: ''
    }
  },
  computed: {
    ...mapGetters(['devicesObj', 'lang'])
  },
  methods: {
    getDatatime() {
      const serialno = this.device.rtu_serialno || this.device.serialno
      const states = this.devicesObj[serialno] && this.devicesObj[serialno].states
      return states && states.datatime || '--'
    },
    getState(item) {
      const serialno = item.rtu_serialno || item.serialno
      const states = this.devicesObj[serialno] && this.devicesObj[serialno].states

      if (states) {
        if (!item.expression) {
          return getDeviceState(states[item.namekey], item, states)
        } else {
          const expression = JSON.parse(item.expression)
          let result = ''
          expression.forEach((item) => {
            if (states[item.namekey]) {
              result += states[item.namekey] + item.unit
            }
          })
          return result || '--'
        }
      }
      return ''
    },
    getClass(item) {
      const state = this.getState(item)
      const dangerArr = ['本地', '故障', '跳闸', '停止']
      const successArr = ['远程', '正常', '闭合', '运行']
      if (item.datatype === 'bool') {
        if (dangerArr.includes(state)) {
          return 'color-danger'
        }
        if (successArr.includes(state)) {
          return 'color-success'
        }
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  margin-left:auto;
}
.state-container{
  display:flex;
  flex-wrap: wrap;
  margin-top: -20px;
  padding: 12px 0;
  dl{
    display:flex;
    width:12.5%;
    flex-direction:column;
    margin-top:32px;
    text-align:center;
    color:#666;
    dt{
      font-weight:bold;
      font-size:18px;
      color:#333;
      &.color-primary{
        color:#1890ff
      }
      &.color-info{
        color:#666
      }
      &.color-success{
        color:#13ce66
      }
      &.color-warning{
        color:#FFBA00
      }
      &.color-danger{
        color:#ff4949
      }
      em{
        font-style:normal;
        font-size:16px;
        padding-left:4px;
      }
    }
    dd{
      &.iconfont{
        font-size: 18px;
        margin-top: 12px;
      }
      &.name{
        font-size: 12px;
        margin-top: 14px;
      }
    }
  }
}
</style>
